<template>
  <van-button
    v-if="follow"
    size="mini"
    round
    type="warning"
    plain
    :loading="loading"
    @click="followed(false)"
    >已关注</van-button
  >
  <van-button
    v-else
    size="mini"
    round
    :loading="loading"
    type="warning"
    @click="followed(true)"
    >关注</van-button
  >
</template>

<script>
import { followUser, notFollowUser } from '@/api/user.js'
export default {
  name: 'FollowIndex',
  props: {
    follow: {
      type: Boolean,
      required: true
    },
    userId: {
      type: [Number, String],
      required: true
    }
  },
  data () {
    return {
      loading: false
    }
  },
  methods: {
    async followed (boo) {
      this.loading = true
      if (boo) {
        // 关注用户
        try {
          await followUser({
            target: this.userId
          })
          this.$toast('关注用户成功')
          this.$emit('changeFollow', boo)
        } catch (err) {
          this.$toast(err.response.data.message)
        }
      } else {
        // 取消关注用户
        try {
          await notFollowUser(this.userId)
          this.$toast('取消关注用户成功')
          this.$emit('changeFollow', boo)
        } catch (err) {
          this.$toast('取消关注用户失败')
          console.log(err.response)
        }
      }
      this.loading = false
    }
  }
}
</script>

<style></style>
